<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1 maximum-scale=2, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-title" content="Add to Home">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="x-rim-auto-match" content="none">
		<title>占位拍照</title>
		
		<!-- 网站的ico图标 -->
		<link rel="shortcut icon" href="static/api/images/favicon.jpg" type="image/x-icon">
		<link href="static/api/css/violation_publi.css" rel="stylesheet" type="text/css">
		<link href="static/api/css/violation_style.css" rel="stylesheet" type="text/css">
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			border: 0;
			box-sizing: border-box;
		}

		.advertising{
			width: 100%;
			height: 15vw;
			background-color: rgb(0, 102, 255);
			color: white;
			font-size: 30px;
			text-align: center;
			line-height: 15vw;
		}

		.clearfix:after {
			content: ".";
			display: block;
			font-size: 0;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.clearfix {
			display: inline-table;
		}

		.clearfix {
			display: block;
		}

		.che_tit {
			text-align: center;
			padding: 20px;
		}

		.ul_pro {
			background-color: #CED3D9;
			text-align: center;
			padding: 4px 2px;
			font-size: 14px;
		}

		.ul_pro li {
			float: left;
			width: 11.11%;
			padding: 2px;
			box-sizing: border-box;
		}

		.ul_pro .li_close {
			float: right;
			width: 22.22%;
		}

		.ul_pro .li_close span {
			background-color: #ACB3BB;
		}

		.ul_pro .li_clean {
			float: right;
			width: 22.22%;
		}

		.ul_pro li span {
			display: block;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 2px 2px 2px #888888;
			/* max-width:48px; margin:0 auto; */
			line-height: 32px;
			padding-top: 2px;
		}

		.ul_pro li span:active {
			background-color: #4DA9F2;
			color: #fff;
		}

		.ul_input {
			padding: 5px;
			width: 100%;
			margin: 0 auto;
			padding-bottom: 10px;
		}

		.ul_input li {
			float: left;
			width: 12.5%;
			/* padding: 2px; */
			text-align: center;
		}

		.ul_input li span {
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 4px;
			width: 38px;
			margin: 0 auto;
			height: 40px;
			line-height: 40px;
			justify-content: center;
			/* text-align: center; */
			/* margin: 0 auto; */
			/* flex-wrap: wrap; */
		}
		.ul_keybord {
			background-color: #CED3D9;
			text-align: center;
			padding: 4px 2px;
			font-size: 14px;
		}
		.ul_keybord li {
			float: left;
			width: 10%;
			padding: 2px;
			box-sizing: border-box;
		}
		.ul_keybord .ikey20 {
			margin-left: 5%;
		}
		.ul_keybord .li_w {
			width: 11.11%;
		}
		.ul_keybord .li_close {
			float: right;
			width: 22.22%;
		}
		.ul_keybord .li_close span {
			background-color: #ACB3BB;
		}
		.ul_keybord .li_clean {
			float: right;
			width: 22.22%;
		}
		.ul_keybord li span {
			display: block;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 2px 2px 2px #888888;
			/* max-width:48px; margin:0 auto; */
			line-height: 32px;
			padding-top: 2px;
		}
		.ul_keybord li span:active {
			background-color: #4DA9F2;
			color: #fff;
		}
		#park-timekeeping{
			margin: 0 auto;
			width: 60%;
			height: 40px;
			border-radius: 3px;
			background-color: #4DA9F2;
			color: white;
		}
		.new-energy span{
			font-size: 13px ;
			line-height: 18px !important;
		}
		.phone_name{
			text-align: center;
        	width: 80%;
            height: 40px;
            line-height: 40px;
            color: #000;
            border-radius: 10px;
            margin-top:20px;
            font-size:20px;
            border:1px solid #ccc;

		}
	</style>
	<link href="static/admin/css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
	</head>

	<body>
		<!-- ====================================loading -->
		<section id="loading"></section>
		<!-- ====================================页面开始 -->
		<!--登录-->
		<header class="acc_head">
			<div class="clearfix">
				<h1 class="tc">占位拍照</h1>
				<a href="#" class="out_icon"><!--退出--></a>
			</div>

		</header>
		<div class="che_tit">添加车牌</div>
		<div class="car_input" data-pai="">
			<ul class="clearfix ul_input">
				<li class="input_pro"><span></span></li>
				<li class="input_pp input_zim"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp new-energy-input" style="display: none;"><span></span></li>
				<li class="new-energy"><span>新能源</span></li>
			</ul>
		</div>
		<div id="a" style="display:none"></div>
		<section class="acc_apply">
			<ul>
				<li class="clearfix">
					<label class="tl">车位号：</label>
					<input autocomplete="off" placeholder="请输入车位号" class="" type="text" />
				</li>
				<!--<li class="clearfix">
					<label class="tl acc_five">身份证姓名：</label>
					<input autocomplete="off" placeholder="请输入姓名" class="" type="text" />
				</li>
				<li class="clearfix">
					<label class="tl acc_five">身份证号码：</label>
					<input autocomplete="off" placeholder="请输入身份证号码" class="" type="text" />
				</li>-->
				<li class="clearfix" >
					<label class="tl acc_four fl">请上传图片：</label>
				</li>
				<li style="border-top: 0; margin-bottom: 60px;">
					<div class="acc_img">
						<p class="tc">参考样例</p>
						<div id="sss">
							<img class="acc_imgin" src="static/api/images/example.png" id="img0">
						</div>
						<div class="acc_sc">
							<a href="javascript:;" class="tc acc_scicon">选择图片</a>
							<input type="file" name="file0" id="file0" multiple class="ph08" />

						</div>
						<!--<div  style="border:1px solid #ccc;height:200px">
							<textarea class="ph09 ">
								请描述身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，建议未化妆。手持证件人的五官清晰可见。照片内容真实有效。不得做任何修改。支持jpg、jpeg、bmp、gif格式照片。大小不超过5M
							</textarea>
						</div>-->
						
						<!--<p class="ph09 ">注：身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，建议未化妆。手持证件人的五官清晰可见。照片内容真实有效。不得做任何修改。支持jpg、jpeg、bmp、gif格式照片。大小不超过5M</p>-->
					</div>
				</li>
			</ul>
		</section>
		<footer class="acc_foot clearfix">
			<a href="#" class="fl tc acc_cancel">取消</a>
			<a href="#" class="fl tc acc_sure" style="background-color:#4DA9F2">提交</a>
		</footer>
		<!--弹出层-->
		<article id="tip">
			<div class="pack">
				<h1 class="tc">提交成功</h1>
				<p class="tc"></p>
				<a href="#">确定</a>
			</div>
		</article>
		<!-- 网站要用到的一些类库 -->
		<script src="static/api/js/violation_jquery1.8.3.min.js"></script>
		<script src="static/api/js/violation_script.js"></script>
		<script type="text/javascript">
		
			$(function() {
				/*document.documentElement.style.fontSize=document.documentElement.clientWidth*12/320+'px';*/
				$(window).on("load", function() {
						$("#loading").fadeOut();
					})
					// ========================================浮层控制
				$("#tip .pack a").on("click", function() {
					$("#tip").fadeOut()
					$("#tip .pack p").html("")
					return false;
				})

				function alerths(str) {
					$("#tip").fadeIn()
					$("#tip .pack p").html(str)
					return false;
				}
				$(".acc_sure").on("click", function() {
					alerths("请等待审核！")
					return false;
				})
				$("#file0").change(function() {
					if (this.files && this.files[0]) {
						var objUrl = getObjectURL(this.files[0]);
						console.log("objUrl = " + objUrl);
						if (objUrl) {
							$("#img0").attr("src", objUrl);
							$("#file0").click(function(e) {
								$("#img0").attr("src", objUrl);
							});
						} else {
							//IE下，使用滤镜
							this.select();
							var imgSrc = document.selection.createRange().text;
							var localImagId = document.getElementById("sss");
							//图片异常的捕捉，防止用户修改后缀来伪造图片
							try {
								preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
							} catch (e) {
								this._error("filter error");
								return;
							}
							this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
						}
					}
				});
				//建立一個可存取到該file的url
				function getObjectURL(file) {
					var url = null;
					if (window.createObjectURL != undefined) { // basic
						url = window.createObjectURL(file);
					} else if (window.URL != undefined) { // mozilla(firefox)
						url = window.URL.createObjectURL(file);
					} else if (window.webkitURL != undefined) { // webkit or chrome
						url = window.webkitURL.createObjectURL(file);
					}
					return url;
				}
			})
		</script>
	<script type="text/javascript" src="static/admin/js/jquery.js"></script>
	<script src="static/admin/js/layer.js" type="text/javascript"></script>
	<script src="static/admin/js/index.js" type="text/javascript"></script>
	<script type="text/javascript">
		var newEnergy = false;
        $("#park-timekeeping").on("click",()=>{
            var car_number = $("#a").text();
            var phone = $('#phone').val();
            var name = $("#name").val();
            var user_id="";
            var url = '{:url("caradd")}';
            if($("#a").text().length >= 7){
                $.post(url, {car_number:car_number,phone: phone,name:name
                	,user_id:user_id}, function(r){
                    if (r.success) {
                        //alert(r.success);
                        window.location.href="{:url('carlist')}";
                    }else{
                        alert(r.error);
                        location.reload()
                    }
                })
            }else{
                alert("请输入正确车牌格式")
            }
        });
		$(".new-energy").on("click",()=>{
			newEnergy = true;
			$(".new-energy").css("display","none");
			$(".new-energy-input").css("display","inline");
		})
	</script>
	<div id="layui-m-layer6" class="layui-m-layer layui-m-layer1" index="6">
		<div class="layui-m-layermain">
			<div class="layui-m-layersection">
				<div class="layui-m-layerchild  layui-m-anim-up" style="position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;">
					<div class="layui-m-layercont">
						<div id="pro">
							<ul class="clearfix ul_pro">
								<li><span onclick="chooseProvince(this);">京</span></li>
								<li><span onclick="chooseProvince(this);">沪</span></li>
								<li><span onclick="chooseProvince(this);">浙</span></li>
								<li><span onclick="chooseProvince(this);">苏</span></li>
								<li><span onclick="chooseProvince(this);">粤</span></li>
								<li><span onclick="chooseProvince(this);">鲁</span></li>
								<li><span onclick="chooseProvince(this);">晋</span></li>
								<li><span onclick="chooseProvince(this);">冀</span></li>
								<li><span onclick="chooseProvince(this);">豫</span></li>
								<li><span onclick="chooseProvince(this);">川</span></li>
								<li><span onclick="chooseProvince(this);">渝</span></li>
								<li><span onclick="chooseProvince(this);">辽</span></li>
								<li><span onclick="chooseProvince(this);">吉</span></li>
								<li><span onclick="chooseProvince(this);">黑</span></li>
								<li><span onclick="chooseProvince(this);">皖</span></li>
								<li><span onclick="chooseProvince(this);">鄂</span></li>
								<li><span onclick="chooseProvince(this);">津</span></li>
								<li><span onclick="chooseProvince(this);">贵</span></li>
								<li><span onclick="chooseProvince(this);">云</span></li>
								<li><span onclick="chooseProvince(this);">桂</span></li>
								<li><span onclick="chooseProvince(this);">琼</span></li>
								<li><span onclick="chooseProvince(this);">青</span></li>
								<li><span onclick="chooseProvince(this);">新</span></li>
								<li><span onclick="chooseProvince(this);">藏</span></li>
								<li><span onclick="chooseProvince(this);">蒙</span></li>
								<li><span onclick="chooseProvince(this);">宁</span></li>
								<li><span onclick="chooseProvince(this);">甘</span></li>
								<li><span onclick="chooseProvince(this);">陕</span></li>
								<li><span onclick="chooseProvince(this);">闽</span></li>
								<li><span onclick="chooseProvince(this);">赣</span></li>
								<li><span onclick="chooseProvince(this);">湘</span></li>
								<li class="li_close" onclick="closePro();"><span>关闭</span></li>
								<li class="li_clean" onclick="cleanPro();"><span>清空</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</body>

</html>